<template >
  <!-- 侧边栏菜单 -->
   <el-menu
     :router='true'
      :default-active="$route.path"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <template v-for="item in menuData">
         <el-submenu v-if="item.children" :key="item._id" :index="item._id">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{item.title}}</span> 
        </template>
          <el-menu-item v-for="childItem in item.children" :key="childItem.path" :index="childItem.path">{{childItem.title}}</el-menu-item>
      </el-submenu>

      <el-menu-item v-else :key="item._id" :index="item.path">
        <i class="el-icon-menu"></i>
        <span slot="title">专业管理</span>
      </el-menu-item>
      
    </template>
      </el-menu>
</template>

<script>
export default {
     methods: {
  
    },
    data() {
      return {
        menuData:[
          { _id:'1',title:"学生管理",
          children:[
            {
              path:"/home/studentList",
              title:'学生列表'
             },
            {
              path:"/home/studentAdd",
              title:'新增学生'
             },
      
          
          
          ]
          },
          {
            _id:'2',
            title:"专业管理",
            children:[
              {
             path:"/home/subject",
              title:'专业列表'
             },
              {
             path:"/home/subjectAdd",
              title:'新增专业'
             },
            ]
            
          },
          {
            _id:'3',
               title:"班级管理",
             children:[
            {
             path:"/home/classesList",
              title:'班级列表'
             },
            {
               path:"/home/classesAdd",
              title:'新增班级'
             },
          
          
          ]
            
          },
        ]
      }
    },
}
</script>

<style scoped lang="scss">
.el-menu ::v-deep{
  border-right:none
}
</style>